<?php
/**
 * Created by PhpStorm.
 * User: lixy
 * Date: 2016/12/26
 * Time: 17:44
 */
use app\models\Mall;
use yii\helpers\Url;

$web = Url::base();
?>

<!--扫码支付-->


<script>
    function showWxPayCode(integral,orderCode){
        $(".pay-achieve-btn").hide();
        $(".pay-popup,.pay-shade").fadeIn();
        var data={};
        data.integral=integral;
        data.orderCode=orderCode;
        data.trade_type='NATIVE';

        var re=requestJsonMallM("<?=Url::to(['pay-integral/mall-m-weixin-pay-handle'])?>",data);
        if(re.status==0) {
            var code_url=re.data.code_url;
            out_trade_no=re.data.out_trade_no;
            $('.pay-code').attr('src','qr-code-out?text='+encodeURI(code_url));
        }else {
            alert('error:'+re.message);
            return;
        }
    }
    showWxPayCode_ok=function(){
        parent.window.location.href ="<?=Url::to(['mall-m/pay-order-success','institution_code'=>Mall::getCurrentInstitutionCode()])?>"+'&isMix=1&out_trade_no='+out_trade_no;
    };
</script>
<style>
    .pay-popup{
        width: 12.5rem;
        padding-bottom: 1.75rem;
        position: fixed;
        left: 50%;
        top: 4.5rem;
        margin-left: -6.25rem;
        background: #FFFFFF;
        border-radius: .25rem;
        z-index: 9;
        display: none;
    }
    .pay-popup .close-popup-btn{
        position: absolute;
        left: .3rem;
        top: .3rem;
    }
    .pay-popup .close-popup-btn:active{
        background: #F6F6F6;
    }
    .pay-popup .close-popup-btn img{
        width: 1.5rem;
        height: 1.5rem;
    }
    .pay-popup .pay-title{
        text-align: center;
        font-size: .55rem;
        color: #727171;
        margin-top: 1.75rem;
    }
    .pay-popup .pay-code{
        width: 9rem;
        height: 9rem;
        margin-left: 1.75rem;
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    .pay-popup .pay-achieve-btn{
        width: 10.5rem;
        height: 1.75rem;
        margin-left: 1rem;
        text-align: center;
        line-height: 1.75rem;
        font-size: .65rem;
        color: #FFFFFF;
        border-radius: .25rem;
        background: #06be04;
        display: none;
    }
    .pay-popup .pay-achieve-btn:active{
        background: #3ad838;
    }
    .pay-shade{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        position: fixed;
        left: 0;top: 0;
        z-index: 1;
        display: none;
    }
</style>
<div class="pay-popup">
    <a class="close-popup-btn">
        <img src="<?= $web ?>/images/mall-m/close-popup-btn.png"/>
    </a>
    <p class="pay-title">长按图片  识别二维码  支付</p>
    <img class="pay-code" src=""/>
    <a href="#" onclick="showWxPayCode_ok();">
        <p class="pay-achieve-btn">我已完成支付</p>
    </a>
</div>
<div class="pay-shade"></div>
<script type="text/javascript">
    $(function(){

        $(".close-popup-btn,.pay-shade").click(function(){
            $(".pay-popup,.pay-shade").fadeOut();
        });
        $(".pay-code").get(0).addEventListener('touchstart', function(event) {
            $(".pay-achieve-btn").fadeIn();
        });
//        $(".pay-code").on("tap",function(){
//            $(".pay-achieve-btn").fadeIn();
//        });
    })
</script>